<template>
  <sc-dialog :title="titleMap[mode]" v-model="visible" width="65%" destroy-on-close @closed="$emit('closed')">
    <el-form class="menuform" ref="formDialog" :model="formInfo" :rules="formRules" :disabled="mode=='show'" label-width="100px">
      <el-col :span="16" class="menuInfo">
        <el-row>
          <el-col :span="14">
            <el-form-item label="上级菜单" prop="parentId">
              <el-cascader v-model="formInfo.parentId" :options="groups" :props="groupsProps" :show-all-levels="false" clearable style="width: 100%;"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <div class="flex-row">
              <el-form-item label="图标/名称" prop="icon">
                <sc-icon-select v-model="formInfo.icon" style="width:18%;"></sc-icon-select>
                <el-input v-model="formInfo.title" clearable placeholder="菜单显示名字" style="width:82%;"></el-input>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="菜单别名" prop="name">
            <el-input v-model="formInfo.name" clearable placeholder="菜单别名"></el-input>
            <div class="el-form-item-msg">系统唯一且与内置组件名一致，否则导致缓存失效。如类型为Iframe的菜单，别名将代替源地址显示在地址栏</div>
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="路由地址">
              <el-input v-model="formInfo.path" clearable placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="菜单类型" prop="menuType">
              <el-radio-group v-model="formInfo.menuType">
                <el-radio-button :label="1">菜单</el-radio-button>
                <el-radio-button :label="2">Iframe</el-radio-button>
                <el-radio-button :label="3">外链</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="视图路径">
              <el-input v-model="formInfo.component" clearable placeholder="">
                <template #prepend>views/</template>
              </el-input>
              <div class="el-form-item-msg">如父节点、链接或Iframe等没有视图的菜单不需要填写</div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="整页路由">
              <el-switch v-model="formInfo.fullpage" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="14">
            <el-form-item label="标签">
              <el-input v-model="formInfo.tag" clearable placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="是否隐藏">
              <el-checkbox v-model="formInfo.hidden">隐藏菜单</el-checkbox>
              <el-checkbox v-model="formInfo.hiddenBreadcrumb">隐藏面包屑</el-checkbox>
            </el-form-item>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="8" class="permissionList">
        <sc-form-table v-model="formInfo.menuPermissionList" :addTemplate="menuPermissionAddTemplate" placeholder="暂无菜单功能">
          <el-table-column prop="code" label="名称" width="120">
            <template #default="scope">
              <el-input v-model="scope.row.name" placeholder="请输入名称"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="url" label="代码" width="160">
            <template #default="scope">
              <el-input v-model="scope.row.code" placeholder="请输入代码"></el-input>
            </template>
          </el-table-column>
        </sc-form-table>
      </el-col>
    </el-form>
    <template #footer>
      <el-button @click="visible=false">取 消</el-button>
      <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </sc-dialog>
</template>
<script>

import scIconSelect from '@/components/scIconSelect'
export default {
  emits: ['success', 'closed'],
  components: {
    scIconSelect
  },
  data() {
    return {
      mode: "add",
      titleMap: {
        add: '新增',
        edit: '编辑',
        show: '查看'
      },
      visible: false,
      isSaveing: false,
      //表单数据
      formInfo: {
        icon: "",
        active: "",
        component: "",
        path: "",
        redirect: "",
        menuColor: "",
        menuPermissionList:[],
      },
      //所需数据选项
      groups: [],
      groupsProps: {
        value: 'id',
        label: 'title',
        children: 'children',
        emitPath: false,
        checkStrictly: true
      },
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#67C23A',
        '#00ced1',
        '#409EFF',
        '#c71585'
      ],
      menuPermissionAddTemplate: {
        Id:null,
        name: "",
        code: "",
      },
      //验证规则
      formRules: {
        title: [
          { required: true, message: '请输入菜单名称' }
        ],
        name: [
          { required: true, message: '请输入菜单别名' }
        ],
        icon: [
          { required: true, message: '请选择图标', trigger: 'change' }
        ],
        platform: [
          { required: true, message: '请选择菜单类型' }
        ],
      },
    }
  },
  mounted() {
  },
  methods: {
    //显示
    open(mode = 'add') {
      this.mode = mode;
      this.visible = true;
      return this
    },
    //表单提交方法
    submit() {
      this.$refs.formDialog.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          var res = {};
          if (this.mode == 'add') {
            res = await this.$API.menu.create.post(this.formInfo);
          } else {
            res = await this.$API.menu.update.put(this.formInfo);
          }
          this.isSaveing = false;
          if (res.code == 200) {
            this.$emit('success', this.formInfo, this.mode);
            this.visible = false;
            this.$Message.success("操作成功")
          } else {
            this.$Message.warning(res.msg);
          }
        }
      })
    },
    //表单注入数据
    async setData(data) {
      var par = {
        platform: data.platform
      }
      this.getGroup(par);
      Object.assign(this.formInfo, data);
    },
    //初始化信息
    async getGroup(par) {
      this.formInfo.platform = parseInt(par.platform);
      var res = await this.$API.menu.getTreeList.get(par);
      this.groups = res.data;
    },
  }
}
</script>
<style scoped>
h2 {
  font-size: 17px;
  color: #3c4a54;
  padding: 0 0 20px 0;
}
[data-theme="dark"] h2 {
  color: #fff;
}
[data-theme="dark"] .permissionList {
  border-color: #434343;
}

.menuform {
  height: 350px;
}
.menuInfo {
  padding-right: 5px;
}
.permissionList {
  border-left: 1px solid #eee;
  padding-left: 5px;
  overflow-y: auto;
  height: 320px;
}
</style>
